<template>
	<view class="userinfo">
		<headertop title="个人资料" str1="oridei" :back1="back1"></headertop>
		<view class="userinfopback">

		</view>
		<view class="usercontent">
			<view class="userbox">
				<view class="userline">
					<span>头像：</span>
					<button class="righttex" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="userobj.avatar||'/static/images/默认头像.png'" class="rightteximg" mode=""></image>
					</button>
				</view>
				<view class="userline1">
					<span>昵称：</span>
					<input type="nickname" placeholder="请输入姓名" @change="getNickname" v-model="userobj.nickname" />
				</view>
			</view>
		</view>
		<view class="usercontent" style="margin-top:22rpx;height: 100rpx;">
			<view class="userbox">
				<view class="userline1">
					<span><span style="color: #F53F3F;">*</span> 手机号码：</span>
					<input type="text" v-model="userobj.mobile" :disabled="true" placeholder="请输入" />
				</view>
			</view>
		</view>
		<view class="fixedbox">
			<view class="btn" @click="save">
				保存
			</view>
		</view>

	</view>
</template>


<script setup>
	import headertop from '@/components/header.vue'

	import {
		getToken
	} from '@/ulm/utils/auth.js'
	import {
		onLoad,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from 'vue'
	import {
		$api
	} from '../../ulm';
	import {
		baseUrl
	} from '@/ulm/config';
	const date = new Date()
	const years = []
	const year = date.getFullYear()
	const months = []
	const month = date.getMonth() + 1
	const days = []
	const value1 = ref(0)
	const birthdayval = ref(0)
	const day = date.getDate()
	for (let i = 1900; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.push(i)
	}


	const value = ref([9999, month - 1, day - 1])
	const xingbie = reactive([{
		'name': '男',
		id: 1
	}, {
		'name': '女',
		id: 2
	}])
	const indicatorStyle = ref(`height: 50px;`)
	const titlepopu = ref('')
	const userobj = ref({})
	const show = ref(false)
	const gender = ref(0)
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#FBE7D2'
		} else {
			back1.value = ''
		}
	})
	onLoad(() => {
		getuser()
	})

	function getNickname(e) {
		userobj.value.nickname = e.detail.value
	}

	function uploadimg() {

		uni.chooseImage({
			success: function(res) {
				const tempFilePaths = res.tempFilePaths;
				uni.uploadFile({
					url: `${baseUrl}/api/common/upload`,
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						token: getToken()
					},
					success: (uploadFileRes) => {
						userobj.value.avatar = JSON.parse(uploadFileRes.data).data.fullurl
					}
				});
			}
		});

	}
	// 获取微信头像
	function onChooseAvatar(e) {

		uni.uploadFile({
			url: `${baseUrl}/api/common/upload`,
			filePath: e.detail.avatarUrl,
			name: 'file',
			header: {
				token: getToken()
			},
			success: (uploadFileRes) => {
				userobj.value.avatar = JSON.parse(uploadFileRes.data).data.fullurl
			}
		});
		// 注意:这里拿到的头像url是个临时的路径,需要自行对头像进行上传处理,参考uni.upload()
	}
	async function save() {
		if (!userobj.value.nickname) {
			uni.showToast({
				title: '昵称不能为空',
				icon: 'none'
			})
			return
		}
		if (userobj.value.nickname.length > 15) {
			uni.showToast({
				title: '昵称长度限制为2-15个字符',
				icon: 'none'
			})
			return
		}
		if (userobj.value.nickname.length < 2) {
			uni.showToast({
				title: '昵称长度限制为2-15个字符',
				icon: 'none'
			})
			return
		}
		const res = await $api.profileinfo({
			nickname: userobj.value.nickname,
			avatar: userobj.value.avatar,
		})
		if (res.code == 1) {
			uni.navigateBack()
			setTimeout(() => {
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				})
			}, 500)
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function open(str) {
		titlepopu.value = `请选择${str}`
		show.value = true
	}

	// function bindChange(e) {
	// 	const val = e.detail.value
	// 	if (titlepopu.value == '请选择出生日期') {
	// 		birthdayval.value =
	// 			`${years[val[0]]}-${months[val[1]]<10?'0'+months[val[1]]:months[val[1]]}-${days[val[2]]<10?'0'+days[val[2]]:days[val[2]]}`
	// 	} else {
	// 		gender.value = xingbie[val[0]]['id']
	// 	}
	// }
	async function getuser() {
		const res = await $api.userinfo1()
		if (res.code == 1) {
			userobj.value = res.data.userinfo
		}
	}

	function queding() {
		if (titlepopu.value == '请选择出生日期') {
			if (!birthdayval.value) {
				userobj.value.birthday =
					`${date.getFullYear()}-${months[month-1]<10?'0'+months[month-1]:months[month-1]}-${day<10?'0'+day:day}`

			} else {
				userobj.value.birthday = birthdayval.value
			}
			if (convertToTimestamp(userobj.value.birthday) > Date.now()) {
				userobj.value.birthday = ''
				uni.showToast({
					title: '请选择正确出生日期',
					icon: 'none'
				})
				return
			}
		} else {
			if (!gender.value) {
				userobj.value.gender = xingbie[0]['id']
			} else {
				userobj.value.gender = gender.value
			}
		}
		show.value = false
	}

	function convertToTimestamp(dateStr) {
		return new Date(dateStr).getTime();
	}
</script>
<style lang="scss">
	.righttex {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		position: relative;
		display: flex;
		border: none !important;
		align-items: center;
		overflow: auto !important;
		// background: $btn !important;
		background-color: none !important;
		background-size: 100% 138% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 40rpx !important;
		-webkit-tap-highlight-color: none !important;
		margin-right: 0 !important;
		justify-content: center;
		align-items: center;
	}

	.rightteximg {
		width: 88rpx;
		height: 88rpx;
		position: absolute;
	}

	.xuanxiang {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		overflow: hidden;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.tt {
			font-size: 32rpx;
		}
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	::v-deep .u-popup__content {
		// background-color: rgba(255, 0, 0, 0) !important;
		border-radius: 20rpx 20rpx 0 0;
	}

	input {
		text-align: right;
	}

	.fixedbox {
		width: 100%;
		overflow: hidden;
		height: 184rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0%;
		z-index: 9999;

		.btn {
			width: 686rpx;
			height: 88rpx;
			background: #2ab4f5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 88rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			margin: auto;
			margin-top: 22rpx;
		}
	}

	page {
		background: #F7F8FA !important;
	}

	.userinfo {
		width: 100%;
		overflow: hidden;
		position: relative;

		.userinfopback {
			width: 750rpx;
			height: 314rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.usercontent {
			width: 686rpx;
			margin: auto;
			margin-top: 208rpx;
			overflow: hidden;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			overflow: hidden;

			.userbox {
				width: 686rpx;
				height: 230rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				overflow: hidden;

				.userline1 {
					width: 630rpx;
					margin: auto;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
				}

				.userline {
					width: 630rpx;
					margin: auto;
					height: 128rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #F2F2F2;
					justify-content: space-between;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;

					.righttex {
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						position: relative;
						display: flex;
						border: none !important;
						align-items: center;
						overflow: auto !important;
						// background: $btn !important;
						background-color: none !important;
						background-size: 100% 138% !important;
						padding-left: 0 !important;
						padding-right: 0 !important;
						margin-left: 0rpx !important;
						-webkit-tap-highlight-color: none !important;
						margin-right: 0 !important;
						overflow: hidden !important;

						.rightteximg {
							width: 88rpx;
							height: 88rpx;
							position: absolute;
						}

					}

					.avtar {
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
					}
				}
			}
		}

	}
</style>